<!--
 * @Author: 清羽
 * @Date: 2022-09-30 10:42:32
 * @LastEditTime: 2022-10-01 18:13:40
 * @LastEditors: you name
 * @Description: 
-->
<!-- check 页 -->
<template>
  <div class="check">

    <div
      class="form"
      v-if="businessData"
    >
      <el-row :gutter="20">
        <el-col :span="3">店铺名称:</el-col>
        <el-col :span="21">{{businessData.company_name}}</el-col>
      </el-row>
      <!-- 店铺名称 end -->

      <el-row :gutter="20">
        <el-col :span="3">申请人:</el-col>
        <el-col :span="21">{{businessData.user_id.nickname}}</el-col>
      </el-row>
      <!-- 申请人 end -->

      <el-row :gutter="20">
        <el-col :span="3">店铺地区:</el-col>
        <el-col :span="21">{{businessData.address}}</el-col>
      </el-row>
      <!-- 店铺地区 end -->

      <el-row :gutter="20">
        <el-col :span="3">银行名称:</el-col>
        <el-col :span="21">{{businessData.bank}}</el-col>
      </el-row>
      <!-- 银行名称 end -->

      <el-row :gutter="20">
        <el-col :span="3">对公账户:</el-col>
        <el-col :span="21">{{businessData.corporate_account}}</el-col>
      </el-row>
      <!-- 对公账户 end -->

      <el-row :gutter="20">
        <el-col :span="3">营业执照:</el-col>
        <el-col :span="21">
          <el-image
            :src="baseUrl+businessData.business_license"
            @click="handlePictureCardPreview(baseUrl+businessData.business_license)"
          ></el-image>
        </el-col>
      </el-row>
      <!-- 营业执照 end -->

      <el-row :gutter="20">
        <el-col :span="3">店铺logo:</el-col>
        <el-col :span="21">
          <el-image
            :src="baseUrl+businessData.company_logo"
            @click="handlePictureCardPreview(baseUrl+businessData.company_logo)"
          ></el-image>
        </el-col>
      </el-row>
      <!-- 店铺logo end -->

      <el-row :gutter="20">
        <el-col :span="3">法人身份证正面:</el-col>
        <el-col :span="21">
          <el-image
            :src="baseUrl+businessData.identity_card_front"
            @click="handlePictureCardPreview(baseUrl+businessData.identity_card_front)"
          ></el-image>
        </el-col>
      </el-row>
      <!-- 法人身份证正面end -->

      <el-row :gutter="20">
        <el-col :span="3">法人身份证反面:</el-col>
        <el-col :span="21">
          <el-image
            :src="baseUrl+businessData.identity_card_reverse"
            @click="handlePictureCardPreview(baseUrl+businessData.identity_card_reverse)"
          >
          </el-image>
        </el-col>
      </el-row>
      <!-- 法人身份证反面end -->

      <el-row :gutter="20">
        <el-col>
          <el-button
            type="primary"
            @click="pass"
          >审核通过</el-button>
          <el-button
            type="danger"
            @click=" isPassDialog = true"
          >审核不通过</el-button>
          <el-button
            type="danger"
            @click="downShelfDialogVisible = true"
          >店铺下架</el-button>
        </el-col>

      </el-row>
      <!-- 操作 end -->
    </div>

    <el-dialog
      :visible.sync="isPassDialog"
      title="审核不通过"
    >
      <el-input
        v-model="noPassInput"
        placeholder="请输入审核不通过原因"
      ></el-input>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="isPassDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="noPass"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审核不通过 弹窗end -->

    <el-dialog
      :visible.sync="downShelfDialogVisible"
      title="店铺下架"
    >
      <el-input
        v-model="downShelfInput"
        placeholder="请输入下架原因"
      ></el-input>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="downShelfDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="downShelf"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 店铺下架 弹窗end -->

    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
    </el-dialog>
    <!-- 查看图片 弹窗end -->
  </div>
</template>

<script>

export default {
  name: "check",
  data () {
    return {
      businessId: this.$route.params.businessId,
      businessData: null,
      baseUrl: this.$baseUrl,
      dialogVisible: false,
      dialogImageUrl: '',
      isPassDialog: false,
      noPassInput: '',
      downShelfDialogVisible: false,
      downShelfInput: ''
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getData()
  },
  // 函数
  methods: {
    getData () {
      this.$api.business.getBusinessInfo({ businessId: this.businessId })
        .then(response => {
          this.businessData = response.data
          console.log("this.$api.business.getBusinessInfo => this.businessData", this.businessData)
        })
        .catch(err => {
          if (err) {
            this.$router.replace({ name: 'businessList' })
          }
        })
    },
    // 放大图片
    handlePictureCardPreview (value) {
      this.dialogImageUrl = value;
      this.dialogVisible = true;
    },
    // 审核通过
    pass () {
      this.$api.business.businessCheckOk(this.businessId)
        .then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          })
          this.$route.push({
            name: 'businessList'
          })
        })
    },
    // 审核不通过
    noPass () {
      const data = { audit_fail_info: this.noPassInput }
      this.$api.business.businessCheckNo(data, this.businessId)
        .then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          })
          this.isPassDialog = false
          this.$route.push({
            name: 'businessList'
          })
        })
    },
    // 下架店铺
    downShelf () {
      const data = { down_shelf_info: this.downShelfInput }
      this.$api.business.businessDownShelf(data, this.businessId).then(response => {
        console.log("this.$api.business.businessDownShelf => response", response)
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.$route.push({
          name: 'businessList'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.check {
  .form {
    margin: 2rem 4rem;

    .el-row {
      margin: 1rem 0;

      .el-col-3 {
        text-align: right;
      }

      .el-image {
        width: 18rem;
      }
    }
  }
}
</style>